<template>
  <div class="home-wrapper">
    <mt-navbar v-model="selected" fixed>
      <mt-tab-item v-for="nav in navList" :key="nav.id" :id="nav.id">{{ nav.title }}</mt-tab-item>
    </mt-navbar>
    <div class="content-list">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
        <ul v-if="selected === '2'">
          <li  v-for="content in activeList" :key="content.id"  @click="queryDetail('2', content.id)" class="content">
            <activity-item  :content="content"></activity-item>
          </li>
        </ul>
        <ul v-else-if="selected === '1'">
          <li  v-for="content in partTimeItemList" :key="content.id" @click="queryDetail('1', content.id)" class="content">
            <part-time-item  :content="content"></part-time-item>
          </li>
        </ul>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'

import activityItem from '@/base/activityItem'
import partTimeItem from '@/base/partTimeItem'
import { Toast } from 'mint-ui'

const colorArr = ['#20A0ff', '#FFAD00', '#FF0D00', '#13ce66']
export default {
  data () {
    return {
      selected: '2',
      pageSize: 10,
      activePageNum: 1,
      partTimeNum: 1,
      navList: [
        {
          id: '2',
          title: '培训报名'
        },
        {
          id: '1',
          title: '兼职信息'
        }
      ],
      activeList: [],
      partTimeItemList: []
    }
  },
  components: {activityItem, partTimeItem},
  methods: {
    _getActiveInfo () {
      const _self = this
      axios.post('/training/findTraining', {
        pageSize: _self.pageSize,
        pageNum: _self.activePageNum
      }, (data) => {
        if (data.length === 0) {
          Toast('没有更多了')
          if (_self.activePageNum > 1) _self.activePageNum--
          return
        }
        data.forEach(item => {
          if (item.trainingIntro.length > 42) {
            item.trainingIntro = item.trainingIntro.substr(0, 42) + '...'
          }
        })
        if (_self.activePageNum > 1) {
          _self.activeList = _self.activeList.concat(data)
        } else {
          _self.activeList = data
        }
      })
    },
    _getPartTimeInfo () {
      const _self = this
      axios.post('/partTimeJob/findPartTimeJob', {
        pageSize: _self.pageSize,
        pageNum: _self.partTimeNum
      }, (data) => {
        if (data.length === 0) {
          Toast('没有更多了')
          _self.partTimeNum--
          return
        }
        data.forEach(item => {
          if (item.workLocation.length > 6) {
            item.workLocation = item.workLocation.substr(0, 6) + '...'
          }
          if (item.typeName.length > 2) {
            item.typeName = item.typeName.substr(0, 2)
          }
          if (item.workIntro.length > 42) {
            item.workIntro = item.workIntro.substr(0, 42) + '...'
          }
          switch (item.typeName) {
            case '促销':
              item.typeColor = colorArr[0]
              break
            case '家教':
              item.typeColor = colorArr[1]
              break
            case '文员':
              item.typeColor = colorArr[2]
              break
            case '服务':
              item.typeColor = colorArr[3]
              break
            default:
              item.typeColor = colorArr[0]
              break
          }
        })
        if (_self.partTimeNum > 1) {
          _self.partTimeItemList = _self.partTimeItemList.concat(data)
        } else {
          _self.partTimeItemList = data
        }
      })
    },
    queryDetail (type, contentId) {
      this.$router.push({
        path: `/wechat/homeDetail/${type}/${contentId}`,
        query: this.$route.query
      })
    },
    loadTop () {
      if (this.selected === '1') {
        this.activePageNum = 1
        this._getActiveInfo()
      } else {
        this.partTimeNum = 1
        this._getPartTimeInfo()
      }
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded()
      }, 1000)
    },
    loadBottom () {
      if (this.selected === '1') {
        this.activePageNum++
        this._getActiveInfo()
      } else {
        this.partTimeNum++
        this._getPartTimeInfo()
      }
      setTimeout(() => {
        this.$refs.loadmore.onBottomLoaded()
      }, 1000)
    }
  },
  created () {
    this._getActiveInfo()
  },
  watch: {
    selected (newValue) {
      if (newValue === '2') {
        this._getActiveInfo()
      } else {
        this._getPartTimeInfo()
      }
    }
  }
}
</script>

<style>
.home-wrapper .mint-tab-item-label {
  font-size: 14px;
}
.home-wrapper .mint-navbar .mint-tab-item {
  padding: 13px 0;
}
</style>

<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';

.home-wrapper {
  .mint-navbar .mint-tab-item.is-selected {
    color: $color-theme;
    border-bottom: 2px solid $color-theme;
    margin-bottom: -2px;
  }
  .content-list {
    margin-top: 45px;
    .content {
      padding-bottom: 18px;
      &:first-child {
        margin-top: 11px;
      }
    }
  }
}
</style>

